<template>
  <div class="financing-audit-page">
    <div class="header">
      <h2>融资审核进度</h2>
      <p class="sub-title">实时跟踪各融资项目的审核节点与当前状态</p>
    </div>

    <!-- 遍历多个融资项目 -->
    <div v-for="(project, index) in financingProjects" :key="index" class="project-card">
      <div class="project-header">
        <h3>{{ project.name }}</h3>
        <span :class="['status-tag', project.statusClass]">{{ project.auditStatus }}</span>
      </div>

      <div class="progress-container">
        <el-progress
            :percentage="project.progressPercentage"
            stroke-width="16"
            :stroke-color="project.progressColor"
        ></el-progress>
        <p class="progress-text">当前进度: {{ project.progressPercentage }}% ({{ project.currentStage }})</p>

        <!-- 融资审核阶段节点 -->
        <div class="audit-stages">
          <div
              v-for="(stage, sIndex) in auditStages"
              :key="sIndex"
              :class="['stage-item', {
              'passed': project.progressPercentage > stage.progress,
              'current': project.progressPercentage === stage.progress,
              'pending': project.progressPercentage < stage.progress
            }]"
          >
            <div class="stage-dot"></div>
            <span class="stage-name">{{ stage.label }}</span>
            <span class="stage-time" v-if="stage.passedTime && (project.progressPercentage > stage.progress)">{{ stage.passedTime }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElProgress } from 'element-plus'

// 融资项目数据（适配审核场景）
const financingProjects = ref([
  {
    name: "企业A-流动资金贷款（500万）",
    progressPercentage: 60, // 对应复审阶段
    auditStatus: "复审中",
    statusClass: "processing",
    currentStage: "风控复审",
    progressColor: "#409EFF"
  },
  {
    name: "企业B-设备融资（300万）",
    progressPercentage: 100, // 已完成所有审核
    auditStatus: "审核通过",
    statusClass: "success",
    currentStage: "放款完成",
    progressColor: "#67C23A"
  },
  {
    name: "企业C-供应链融资（800万）",
    progressPercentage: 40, // 对应初审阶段
    auditStatus: "初审中",
    statusClass: "processing",
    currentStage: "材料初审",
    progressColor: "#409EFF"
  },
  {
    name: "企业D-信用贷款（200万）",
    progressPercentage: 20, // 刚提交材料
    auditStatus: "待初审",
    statusClass: "pending",
    currentStage: "材料提交",
    progressColor: "#E6A23C"
  }
])

// 融资审核阶段节点（含时间戳示例）
const auditStages = [
  { label: "材料提交", progress: 20, passedTime: "09-10 09:30" },
  { label: "材料初审", progress: 40, passedTime: "09-12 14:15" },
  { label: "风控复审", progress: 60, passedTime: "" },
  { label: "终审审批", progress: 80, passedTime: "" },
  { label: "放款完成", progress: 100, passedTime: "" }
]
</script>

<style scoped>
.financing-audit-page {
  background-color: #f5f7fa;
  padding: 30px;
  font-family: "Microsoft YaHei", sans-serif;
}

.header {
  margin-bottom: 30px;
}

.header h2 {
  font-size: 22px;
  color: #1f2329;
  margin: 0 0 8px 0;
}

.sub-title {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.project-card {
  width: 100%;
  height: auto;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.project-header h3 {
  font-size: 16px;
  color: #1f2329;
  margin: 0;
}

.status-tag {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.status-tag.processing {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-tag.success {
  background-color: #f0fff4;
  color: #52c41a;
}

.status-tag.pending {
  background-color: #fffbe6;
  color: #faad14;
}

.progress-container {
  width: 100%;
  padding: 10px 0;
}

.el-progress {
  width: 100%;
}

.progress-text {
  font-size: 14px;
  color: #4b5563;
  margin: 10px 0 25px 0;
}

.audit-stages {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: 30px;
}

.audit-stages::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #e5e7eb;
  z-index: 1;
}

.stage-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 20%;
}

.stage-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #e5e7eb;
  margin-bottom: 8px;
  transition: all 0.3s;
}

.stage-name {
  font-size: 12px;
  color: #6b7280;
}

.stage-time {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
}

/* 已完成阶段样式 */
.stage-item.passed .stage-dot {
  background-color: #67C23A;
  box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.2);
}

.stage-item.passed .stage-name {
  color: #67C23A;
  font-weight: 500;
}

/* 当前阶段样式 */
.stage-item.current .stage-dot {
  background-color: #409EFF;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
}

.stage-item.current .stage-name {
  color: #409EFF;
  font-weight: 500;
}

/* 未完成阶段样式 */
.stage-item.pending .stage-dot {
  background-color: #e5e7eb;
}
</style>